<template>
  <div class="detali">
    <div class="container">
      <div class="content">
        <div class="con_text" v-for="(item, index) in detail" :key="index">
          <div>
            {{ item.topic }}
          </div>
          <div class="name">
            <p v-for="(item1, index1) in item.arr" :key="index1">
              {{ item1.value }}、{{ item1.name }}
            </p>
          </div>
          <div class="bom_resu">
            <p>
              你的答案：<span>{{ item.you }}</span>
            </p>
            <p>
              <span>正确答案：{{ item.answer }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detail: [
        {
          type: 1,
          sole: "单选题",
          answer: "B",
          topic:
            "1.回复12345政务热线工单的处理结果包含以下几项内容_____。(单选题)",
          you: "B",
          arr: [
            { name: "退款金额", value: "A", checked: false },
            { name: "用户满意度", value: "B", checked: false },
            { name: "故障修复报告", value: "C", checked: false },
            { name: "回访用户时间", value: "D", checked: false },
            { name: "用户意见反馈", value: "E", checked: false },
          ],
        },
        {
          type: 1,
          sole: "多选题",
          answer: "B",
          topic:
            "2.回复12345政务热线工单的处理结果包含以下几项内容_____。(单选题)",
          you: "B",
          arr: [
            { name: "退款金额", value: "A", checked: false },
            { name: "用户满意度", value: "B", checked: false },
            { name: "故障修复报告", value: "C", checked: false },
            { name: "回访用户时间", value: "D", checked: false },
            { name: "用户意见反馈", value: "E", checked: false },
          ],
        },
         {
          type: 1,
          sole: "多选题",
          answer: "B",
          topic:
            "3.回复12345政务热线工单的处理结果包含以下几项内容_____。(单选题)",
          you: "B",
          arr: [
            { name: "退款金额", value: "A", checked: false },
            { name: "用户满意度", value: "B", checked: false },
            { name: "故障修复报告", value: "C", checked: false },
            { name: "回访用户时间", value: "D", checked: false },
            { name: "用户意见反馈", value: "E", checked: false },
          ],
        },
      ],
    };
  },
};
</script>
<style lang="scss">
.detali {
  .container {
    padding: 2.5625rem 0.625rem 2rem;
    .content {
      background-color: #fff;
      border-radius: 0.3125rem;
      .con_text {
        height: 14.6875rem;
        width: 100%;
        padding: 1.3125rem 1rem 0.625rem;
        font-size: 0.875rem;
        .name {
          padding: 1rem 0rem;
          border-bottom: 0.125rem dashed #f1737e;
        }
        .bom_resu {
          margin-top: 0.6875rem;
          display: flex;
          p {
            margin-right: 3.3125rem;
          }
          p:last-child {
            color: #00862a;
          }
        }
      }
      .con_text:not(:last-child) {
        border-bottom: 0.125rem solid #f1727c;
      }
    }
  }
}
</style>